<!-- 部位资料建档：蹇泽阳 -->
<template>
  <div class="app-container">
    <JFind :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />

    <el-card class="mt10" shadow="always" :body-style="{ padding: '10px' }">
      <div style="width: 30%">
        <!-- <h1>部位明细</h1> -->
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          :getTableList="getTableList"
          @confirmChange="confirmChange"
          @checkboxChange="checkboxChange"
          @currentRow="currentRow"
        />
      </div>
    </el-card>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
export default defineComponent({
  name: 'PositionDataFile'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import SynchronizationLoginWork from '@/utils/SynchronizationLoginWork'
import fileRequest from '@/utils/fileRequest'
import Synchronization from '@/utils/Synchronization'
import { message } from '@/utils/resetMessage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, ref, watch } from 'vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入序号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部位名称(中)',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入部位名称(英)',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '增加',
    bgColor: '#67C23A'
  },
  {
    type: 'button',
    checkboxLabel: '删除',
    bgColor: '#F56C6C'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])

const tableHeader = ref([
  {
    label: '序号',
    prop: 'seqNo'
  },
  {
    change: true,
    label: '部位名称',
    prop: 'partName'
  },
  {
    label: '部位名称(英)',
    prop: 'engPartName'
  },
  {
    label: '分码',
    type: 'checkbox',
    prop: 'sizeFlag'
  }
])

// 表一模块
// 置空按钮
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '增加') {
    let res = await SynchronizationLoginWork.post<any, any>('/date/getPartAdd', {
      engPartName: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部位名称(英)'
      )?.inputValue,
      partName: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部位名称(中)'
      )?.inputValue,
      seqNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入序号'
      )?.inputValue
    })
    ElMessage.info(res.message)
  }
  if (content === '删除') {
    let res = await SynchronizationLoginWork.post<any, any>(`/date/getPartDel?partName=${tableCurrentRow.value.partName}`)
    ElMessage.info(res.message)
    tableCurrentRow.value = ''
  }
  if (content === '导出') {
    const res = (await fileRequest.post(`/date/PartExport`, {
      engPartName: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部位名称(英)'
      )?.inputValue,
      partName: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部位名称(中)'
      )?.inputValue,
      seqNo: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入序号'
      )?.inputValue,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    })) as any
    const link = document.createElement('a') // 利用a标签自定义下载文件名
    let blob = new Blob([res.data]) // 创建Blob对象，设置文件类型
    link.style.display = 'none'
    //设置连接
    link.href = window.URL.createObjectURL(blob)
    const FileName = decodeURI(res.headers['content-disposition'].split(`filename=`)[1])
    link.download = FileName //自定义文件名字
    document.body.appendChild(link)
    //模拟点击事件
    link.click()
    document.body.removeChild(link)
  }
  getTableList()
}
const tableData = ref([])
const isLoading = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/date/getPartList', {
    engPartName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部位名称(英)'
    )?.inputValue,
    partName: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入部位名称(中)'
    )?.inputValue,
    seqNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入序号'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.partList.map((item: any) => {
    item.sizeFlag === 'Y' ? (item.sizeFlag = true) : (item.sizeFlag = false)
    item.change = 'Y'
    return item
  })
  total.value = tableDataList.total
  // currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)

const checkboxChange = (prop: any, row: any) => {
  ElMessageBox.confirm('是否修改？', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      // console.log(prop, row);
      row.sizeFlag === true ? (row.sizeFlag = 'Y') : (row.sizeFlag = '')
      await SynchronizationLoginWork.put('/date/getPartUpdate', row)
      ElMessage({
        type: 'success',
        message: '修改成功'
      })
      getTableList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改'
      })
      // console.log(getTableList);
      getTableList()
    })
}
const confirmChange = async (row: any) => {
  row.sizeFlag === true ? (row.sizeFlag = 'Y') : (row.sizeFlag = '')
  let res = await SynchronizationLoginWork.put<any, any>('/date', row)
  ElMessage.info(res.message)
}

const tableCurrentRow = ref()
const currentRow = (row: any) => {
  tableCurrentRow.value = row
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}
</style>
<style>
.app-main {
  background-color: white !important;
}
</style>
